<template>
  <div class="report-content-wrapper">
    <van-row v-for="item in compList" :key="item.headIcon">
      <report-sub-head :img="item.headIcon" :text="item.headText" />
      <component :is="item.contentComp" />
    </van-row>
  </div>
</template>
<script>
import * as CONSTANTS from '@/constants/index'
import ALLIMAGES from '@/utils/images/index'
import ReportSubHead from './ReportSubHead'
export default {
  props: {},
  components: { ReportSubHead },
  data() {
    return {
      CONSTANTS: Object.freeze(CONSTANTS),
    }
  },
  computed: {
    IMAGES() {
      return ALLIMAGES.quiz
    },
    compList() {
      return [
        {
          headIcon: this.IMAGES.result,
          headText: CONSTANTS.LABEL_ASSESSMENTRESULT,
          contentComp: () => import('./RadarView.vue'),
        },
        {
          headIcon: this.IMAGES.albumwish,
          headText: CONSTANTS.LABEL_EXPERTCOMMENT,
          contentComp: () => import('./ExpertComment.vue'),
        },
      ]
    },
  },
  mounted() {},
  filters: {},
  watch: {},
  methods: {},
}
</script>

<style lang="less" scoped>
.report-content-wrapper {
  margin-top: 18px;
  padding: 0 9px;
  background-color: #fff;
  box-shadow: 0px 0px 6px 2px rgba(76, 76, 76, 0.04);
  border-radius: 8px;
  border-top: 21px solid transparent;
  border-bottom: 24px solid transparent;
  & > div:first-of-type {
    // margin-top: 29px;
    // background-color: #00ffff;
    & > div:first-of-type {
      // margin-top: 29px;
      // background-color: #00ffff;
      & > i {
        position: relative;
        top: -2px;
      }
    }
  }
}
</style>
